<template>
	<view class="peopleMessage">
		<view class="module-name">
			<span class="name">工龄</span>
			<span style="margin-right: 10rpx;">:</span>
			<input type="number" placeholder="请输入工龄" v-model="num" maxlength="2" />
		</view>
		<view class="module-name">
			<view @click="showAddrPopup" style="width: 100vw;display: flex; align-items: center;">
				<span class="name">家乡</span>
				<span style="margin-right: 10rpx;">:</span>
				<input type="text" placeholder="请选择家乡地址" v-model="num" />
			</view>
			<my-tree ref="popup"></my-tree>
		</view>

		<picker @change="bindPickerChange" :value="index" :range="columns">
			<view class="module-name" style="width: 100vw;display: flex; align-items: center;">
				<span class="name">熟练度</span>
				<span style="margin-right: 10rpx;">:</span>
				<input type="text" placeholder="请选择熟练度" v-model="degree" />
			</view>
		</picker>
		<picker @change="bindPickerPeople" :value="index" :range="peoples">
			<view class="module-name" style="width: 100vw;display: flex; align-items: center;">
				<span class="name">人员构成</span>
				<span style="margin-right: 10rpx;">:</span>
				<input type="text" placeholder="请选择人员构成" v-model="people"/>
			</view>
		</picker>
		<view class="module-name">
			<span class="name">队伍人数</span>
			<span style="margin-right: 10rpx;">:</span>
			<input placeholder="请输入人数" type="number" v-model="num" maxlength="4" />
		</view>
		
		<view class="people-label">
			<view class="title">为自己贴个标签,让老板更懂你(可选三个):</view>
			<view class="labels">
				<view v-for="(item,index) in label" :key="index">
					<view @click="checkLabel(index)" class="label" :class="arr.indexOf(index) != -1 ? check :''">
						{{ item }}
					</view>
				</view>
			</view>
		</view>
		<view class="save">
			<view class="save-message">
				保存资料
			</view>
		</view>
	</view>
</template>

<script>
	import myTree from '../../../components/tree.vue'
	export default {
		data() {
			return {
				columns: ["学徒工(小工)", "中级工(中工)", "高级工(大工)"],
				degree:"",
				peoples:["个人","班组","施工队","突击队"],
				people:"",
				label:["任劳任怨","吃苦耐劳","质量保证","尽职尽责","优质高效",
				"团结协作","爱岗敬业","文明工地"],
				arr:[],
			}
		},
		components: {
			'meTree': myTree
		},
		methods: {
			showAddrPopup() {
				debugger
				this.$refs.popup.$refs.popupTree.open();
			},
			chackCity(options) {

			},
			bindPickerChange(e) {
				this.degree = this.columns[e.target.value]
			},
			bindPickerPeople(e){
				this.people = this.peoples[e.target.value]
			},
			checkLabel(index){
				debugger
				if(this.arr.length > 0 && this.arr.indexOf(index) == -1){
					this.arr.push(index)
				}
				if(this.arr.length == 0){
					this.arr.push(index)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.peopleMessage {
		background: #cecece;
		position: relative;

		.module-name {
			width: 100vw;
			font-size: 30rpx;
			display: flex;
			align-items: center;
			padding: 20rpx 0 20rpx 20rpx;
			border-bottom: solid 1px #d8d8d8;
			background: #FFFFFF;

			.name {
				display: inline-block;
				width: 160rpx;
				text-align-last: justify;
			}
		}
		.people-label{
			padding: 20rpx;
			font-size: 32rpx;
			background: #FFFFFF;
			margin-top: 20rpx;
			border: solid 1px #b8b8b8;
			.labels{
				display: flex;
				flex-wrap: wrap;
				.label{
					border: solid 1px #616161;
					color: #616161;
					padding: 10rpx;
					border-radius: 999rpx;
					margin: 20rpx;
				}
			}
		}
		.check{
			background: #007AFF;
			color: #FFFFFF;
		}
		.save {
			width: 100vw;
			text-align: center;
			position: fixed;
			bottom: 0;
			right: -6rpx;
			background: #cecece;
			padding: 20rpx 30rpx;
		
			.save-message {
				width: 90vw;
				background: #007AFF;
				color: #FFFFFF;
				font-size: 32rpx;
				padding: 14rpx 120rpx;
				border-radius: 16rpx;
			}
		}
	}
</style>
